<template>
  <Modal
    v-model="visible"
    width="500"
    title="退回"
  >
    <Form ref="form" :model="form" :rules="rules" :label-width="90" @submit.native.prevent>
      <FormItem label="退回原因:" prop="backReason">
        <Input v-model="form.backReason" type="textarea" :rows="5" placeholder="请输入退回原因" />
      </FormItem>
    </Form>
    
    <div slot="footer">
      <Button type="text" @click="hide">取消</Button>
      <Button type="primary" @click="onConfirm">确定</Button>
    </div>
  </Modal>
</template>

<script>
  import settlementMgr from '@/biz/commission/settlement.js'

  export default {
    data() {
      return {
        visible: false,
        form: {
          backReason: '',
        },
        rules: {
          backReason: [
            { required: true, message: '请输入退回原因', trigger: 'blur' },
            { max: 300, message: '最多输入300个字', trigger: 'blur,change' }
          ],
        },
      }
    },
    methods: {
      onConfirm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            settlementMgr.sendback({
              commissionId: this.$route.query.commissionId,
              backReason: this.form.backReason
            }).then(() => {
              this.$Message.success('退回成功')
              this.hide()
              // 跳转佣金明细页
              let commissionId = this.$route.query.commissionId
              this.$store.commit('deleteroutefun', '佣金结算')
              setTimeout(() => {
                this.$router.push({
                  path: '/commission/detail',
                  query: { commissionId }
                })
              }, 50)
            })
          }
        })
      },
      show() {
        this.visible = true
      },
      hide() {
        this.visible = false
        this.form = {
          backReason: '',
        }
        this.$refs.form.resetFields()
      },
    },
  }
</script>

<style lang='scss' scoped>
</style>